<template>
    <div class="card rdsp-card-view" data-page="fireHydrant_org">
      <div class="card-content rank-content card-content-padding alarmChange-card-content">
          <div class="rdsp-card-title">
                <div class="left-title" >室外消火栓压力监测</div>
         	</div>
            <div  class="clearfix">
                <div class="showPic left-showPic" ><img  class="firehd" alt="" src="img/xhs.png" ></div>
                <div  class="showPic right-showPic" >
                    <div>
                        <a href="#" class="item-link item-content" @click="goToMoreDector(0)" data-view=".view-main">
                            <div style="font-size: 40px;margin-top: 10px;color: #333333;" id="jcnumInfo">20</div>
                            <div style="font-size: 16px;color:#999999">监测数量</div>
                        </a>
                    </div>
                    <div  class="clearfix">
                         <a href="#" class="item-link item-content" @click="goToMoreDector(1)" data-view=".view-main">
                             <div class="detailInfo" >
                                 <div style="font-size: 24px;color:#FE6668" id="bjnumInfo">6</div>
                                 <div class="desdeInfo">报警</div>
                             </div>
                        </a>
                        <a href="#" class="item-link item-content" @click="goToMoreDector(2)" data-view=".view-main">
                            <div class="detailInfo" >
                                <div style="font-size: 24px;color:#F8B728" id="gznumInfo">6</div>
                                <div class="desdeInfo" >故障</div>
                            </div>
                         </a>
                         <a href="#" class="item-link item-content"  @click="goToMoreDector(5)" data-view=".view-main">
                            <div  class="detailInfo" >
                                <div style="font-size: 24px;color:#77BE07" id="zcnumInfo">8</div>
                                <div class="desdeInfo" >正常</div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <div class="wcAdd">MPa</div>
            <div class="rdsp-card-con" id="alarmChange-line-chart_fhtorg">  </div>
      </div>
    </div>
</template>
<style scoped>
.desdeInfo{
    font-size: 10px;
    color:#999999;
}
.detailInfo{
    float:left;
    width: 51px;
}
.showPic{
    float:left;
    height: 100%;
    width: 50%;
}
.firehd{
    width: 90%;
    margin-top: 10px;
}
#alarmChange-line-chart_fhtorg{
   /*  height: 260px; */
    width: 100%;
    margin-bottom: -15px;
    height: 216px !important;
}
.wcAdd{
    display:none;
    margin-top: 16px;
    float: left;
    position: absolute;
    margin-left: 9px;
    color:#999999
}
</style>

<script>
    return {
        beforeCreate() {
          $("#alarmChange-line-chart_fhtorg").empty();
        },
        data: function () {
            return {
                fcfCategoryId:0,
                fcfCategoryName:""
            }
        },
        methods: {
            goToMoreDector:function(status){
                var self = this;
                app.router.navigate("/moreDectorState/"+status+"/0/0/0/"+self.fcfCategoryId+"/"+self.fcfCategoryName+"/");
            },
        	getNumInfo:function(){
        		$("#jcnumInfo").empty();
        		$("#bjnumInfo").empty();
        		$("#gznumInfo").empty();
        		$("#zcnumInfo").empty();
                var id_org="";
                if (single_Orgid == "") {
                    id_org=userInfor.organizationIds;
                } else {
                    id_org=single_Orgid;
                }
        		Dao.getFcfRealTimeStatusMultiCount({
                    userName:userInfor.accountName,
                    deviceId:appKeyObj.deviceId,
                    fcfsType:2,
                    orgIds :id_org
            }, function (data) {
            	$("#jcnumInfo").html(data.count);
            	$("#bjnumInfo").html(data.fireAlarmCount);
            	$("#gznumInfo").html(data.faultAlarmCount);
            	$("#zcnumInfo").html(data.normalCount);
            })
        		
        	},
        	gethysourceDataInfo :function() {
                var self = this;
                var now = new Date();
                var id_org="";
                    if (single_Orgid == "") {
                        id_org=userInfor.organizationIds;
                    } else {
                        id_org=single_Orgid;
                    }
                  Dao.getFireResMonitorInfo({
                          userName:userInfor.accountName,
                          deviceId:appKeyObj.deviceId,
                          queryType:0,
                          resType:2,
                          orgIds :id_org
                  }, function (data) {
                    if(data && data.length>0 ){
                        self.fcfCategoryId=data[0].fcFacilitiesCategoryId;
                        self.fcfCategoryName=data[0].fcFacilitiesCategoryName;
                        $("#alarmChange-line-chart_fhtorg").show();
                    	$("#alarmChange-line-chart_fhtorg").css('height',"260px");
                    	var arr=[];
                    	var arrDat=[];
                    	var brrDat=[];
                    	for(var i=0;i<data.length;i++ ){
                    			var showDat=0;
                    		if(data[i].analogInfo.length>0){
                    			if(data[i].analogInfo[0].realTimeAnalogInfo){
                    				if(data[i].analogInfo[0].realTimeAnalogInfo.analogValue!=null){
                    				 showDat=data[i].analogInfo[0].realTimeAnalogInfo.analogValue;
                    			}
                    			}
                    		}
                    			arr.push(showDat);
                    			if (data[i].fireTType == 10) {//报警
                    				arrDat.push("报警");
                    				brrDat.push(data[i].organizationName+"<br/>"+data[i].name);
                    			}
                    			else if (data[i].fireTType == 20) {//故障
                    				arrDat.push("故障");
                    				brrDat.push(data[i].organizationName+"<br/>"+data[i].name);
                    			} else if (data[i].fireTType == 30) {//屏蔽
                    				arrDat.push("屏蔽");
                    				brrDat.push(data[i].organizationName+"<br/>"+data[i].name);
                                 }else if (data[i].fireTType == 40) {//联动  #378bf6
                                	 arrDat.push("联动");
                                	 brrDat.push(data[i].organizationName+"<br/>"+data[i].name);
                                 }else if (data[i].fireTType == 0) {//正常  #77be07
                                	 arrDat.push("正常");
                                	 brrDat.push(data[i].organizationName+"<br/>"+data[i].name);
                                 }
                    	}
                    	 self.trawBarInfo(arr,brrDat,arrDat);
                    } else{
                        $("#alarmChange-line-chart_fhtorg").hide();
                    }    
                  },false);
              },
        	trawBarInfo:function(showDat,brrDat,arrDat){
        		$(".wcAdd").show();
            	var self = this;
            	var dom = document.getElementById("alarmChange-line-chart_fhtorg");
            	var myChart = echarts.init(dom);
            	var app = {};
            	option = null;
            	app.title = '坐标轴刻度与标签对齐';

            	option = {
            	    color: ['#3398DB'],
            	    tooltip : {
            	        trigger: 'axis',
            	        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            	            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            	        }
            	    },
            	    grid: {
                         top:'40',
            	        left: '3%',
            	        right: '5%',
            	        bottom: '5%',
            	        containLabel: true
            	    },
                    formatter: function (params) {
                        var res='<div><p>'+params[0].name+'</p></div>';
                            res+='<p>'+params[0].marker+''+params[0].seriesName+':'+params[0].data+'</p>';
                        return res;
                    },
            	    xAxis : [
            	        {
            	        	show:  false,
            	            type : 'category',
            	            data : brrDat,
            	            axisTick: {
            	                alignWithLabel: false,
            	                show: false
            	            },
            	            axisLine: {
            	                show: false
            	            },
            	            axisTick: {
            	                alignWithLabel: false,
            	                show: false
            	            },
            	        }
            	    ],
            	    yAxis : [
            	        {
            	            type : 'value',
            	            name: '',
            	            axisLine: {
            	                show: false
            	            },
            	            axisTick: {
            	                show: false
            	            },
            	            axisLabel: {
            	                textStyle: {
            	                    color: '#999999'
            	                }
            	            }
            	        }
            	    ],
            	    dataZoom: [
            	            {
            	                show: false,
            	               startValue: 0,
                                endValue: 24
            	            },
            	            {
            	                type: 'inside',
            	                startValue: 0,
                                endValue: 24
            	            },
            	            {
            	                show: false,
            	                yAxisIndex: 0,
            	                filterMode: 'empty',
            	                width: 1,
            	                height: '80%',
            	                showDataShadow: false,
            	                left: '-10'
            	            }
            	        ],
            	    series : [
            	        {
            	            name:'当前压力(MPa)',
            	            type:'bar',
            	            barWidth: '50%',
            	            data:showDat,
            	            itemStyle: {   
            	                //通常情况下：
            	                normal:{  
            	　　　　　　　　　　　　//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
            	                    color: function (params){
            	                    	var colorList = ['#FE6668','#F8B728','#77BE07'];
                    	                  if(arrDat[params.dataIndex]=="报警"){
                    	                	  return colorList[0];
                    	                  }else if(arrDat[params.dataIndex]=="故障"){
                    	                	  return colorList[1];
                    	                  }else if(arrDat[params.dataIndex]=="正常"){
                    	                	  return colorList[2];
                    	                  }
            	                    }
            	                },
            	            }
            	        }
            	    ]
            	};
            	if (option && typeof option === "object") {
            	    myChart.setOption(option, true);
            	}
            },
        },
        on: {
            pageInit: function(e, page) {
              //inPage  sort 5 
            },
            pageAfterIn: function(e, page) {
              //inPage  sort 7 
              //Do:进入页面后
              var self = this;
              /* self.trawBarInfo(); */
              self.gethysourceDataInfo();
              self.getNumInfo();
            },
            pageBeforeOut: function(e, page) {
              //outPage  sort 0  
              //Do:离开页面前
            },
            pageBeforeRemove: function(e, page) { 
              //outPage  sort 3  
              //Do：方法销毁、内存释放
            }
      }
    }
</script>